<template>
    <div>
        <!-- 时间和按钮盒子，需要给radio,data一个初始值，复制fromatDateTime函数，在mountef中渲染 -->
        <div class="time" style="margin-top:50px">
            <div style="margin-left:5px">{{ date | formatDateTime }}</div>
            <div>
                <el-radio-group v-model="radio" size="mini">
                    <el-radio-button label="一般行业"></el-radio-button>
                    <el-radio-button label="高危行业"></el-radio-button>
                    <el-radio-button label="所有"></el-radio-button>
                </el-radio-group>
            </div>
        </div>
        <!-- 第一个盒子 -->
        <div class="hidden">
            <div class="inner">
                <div class="head_text">隐患情况</div>
                <div class="select">
                    <el-select v-model="value" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="Hidden_text">
                上报 2 笔重大隐患， 1 笔一般隐患，整体整改率 100.00%。
            </div>
            <!-- 重大隐患和一般隐患 -->
            <div class="box_two">
                <div class="commonly">
                    <div class="img">
                        <img :src="url" alt="安">
                    </div>
                    <div class="risk_text">
                        <div style="color: rgb(255, 34, 34); font-size: 16px">
                            重大隐患（条）
                        </div>
                        <el-row>
                            <el-col :span="12">复查已整改</el-col>
                            <el-col :span="12" justify="flex" align="end" class="el_color">1条</el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">复查已整改</el-col>
                            <el-col :span="12" justify="flex" align="end" class="el_color">1条</el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">复查已整改</el-col>
                            <el-col :span="12" justify="flex" align="end" class="el_color">1条</el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">复查已整改</el-col>
                            <el-col :span="12" justify="flex" align="end" class="el_color">1条</el-col>
                        </el-row>
                    </div>
                    <div class="risk_percent">
                        <div style="font-size: 30px; color: rgb(255, 170, 34); cursor: pointer">
                            2
                        </div>
                        <div style="font-size: 14px; color: rgb(136, 136, 136)">
                            占比67%
                        </div>
                    </div>
                </div>
                <!-- 右边一般隐患 -->
                <div class="weighty">
                    <div class="img">
                        <img :src="url" alt="安">
                    </div>
                    <div class="risk_text">
                        <div style="color: rgb(255, 170, 34); font-size: 16px">
                            一般隐患（条）
                        </div>
                        <el-row>
                            <el-col :span="12">复查已整改</el-col>
                            <el-col :span="12" justify="flex" align="end" class="el_color">1条</el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">复查已整改</el-col>
                            <el-col :span="12" justify="flex" align="end" class="el_color">1条</el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">复查已整改</el-col>
                            <el-col :span="12" justify="flex" align="end" class="el_color">1条</el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">复查已整改</el-col>
                            <el-col :span="12" justify="flex" align="end" class="el_color">1条</el-col>
                        </el-row>
                    </div>
                    <div class="risk_percent">
                        <div style="font-size: 30px; color: rgb(255, 170, 34); cursor: pointer">
                            3
                        </div>
                        <div style="font-size: 14px; color: rgb(136, 136, 136)">
                            占比37%
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- 第二个盒子 -->
        <div class="hidden">
            <div class="inner">
                <div class="head_text">单位管理</div>
            </div>
            <div class="content">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane v-for="(item, index) in tabList" :key="index" :name="item.name">
                        <span slot="label">{{ item.label
                        }}<el-badge :value="item.value" :max="10" style="margin-top: -10px"></el-badge> </span>
                        <!-- 表格显示 -->
                        <router-view></router-view>
                    </el-tab-pane>
                </el-tabs>
            </div>

        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            date: new Date(),
            radio: "所有",
            activeName: "0",
            tabList: [
                { label: "企业分布", value: 99, name: '0' },
                { label: "区域分布", value: 99, name: '1' },
                { label: "重大隐患", value: 99, name: '2' },
                { label: "一般隐患", value: "", name: '3' },
                { label: "重大隐患未整改提醒", value: 99, name: '4' },

            ],
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            value: '',
            url: "",

        }
    },
    methods: {
        handleClick(tab, event) {
            console.log("点击按钮进行切换")
            console.log(1111111, this.tabList)
            // path: "/Workbench/index/" + tab.name 
            this.$router.push({ path: "/Service/Hidden_danger/" + tab.name });
            this.$emit("handleClick", tab);
        },
    },
    filters: {
        formatDateTime(value) {
            let date = new Date(value);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? "0" + MM : MM;
            let d = date.getDate();
            d = d < 10 ? "0" + d : d;
            let h = date.getHours();
            h = h < 10 ? "0" + h : h;
            let m = date.getMinutes();
            m = m < 10 ? "0" + m : m;
            let s = date.getSeconds();
            s = s < 10 ? "0" + s : s;
            return y + "年" + MM + "月" + d + "日" + h + ":" + m + ":" + s;
        }
    },
    computed: {
    },
    mounted() {
        var that = this;
        this.timer = setInterval(() => {
            that.date = new Date(); //修改数据date
        }, 1000);
    }
}
</script>
<style>
.risk_percent {
    width: 100px;
    text-align: center;
    margin: 60px 20px 60px 20px;
}

.el_color {
    color: #000;
    font-weight: bold;
}

.risk_text {
    width: 70%;
    margin: 15px 0 15px 15px;
}

.risk_text .el-row {
    background-color: #f7fafc;
    margin: 5px;
    padding: 2px;
    font-size: 14px;
    color: rgb(136, 136, 136);
}

.risk_text {
    margin-top: 20px;
    margin-left: 20px;
}

.img img {
    width: 58px;
    height: 58px;
}

.img {
    width: 58px;
    height: 58px;
    text-align: center;
    padding: 10px;
    border-radius: 50%;
    border: 2px dashed #6d91f3;
    margin: 50px 20px;

}

.weighty {

    margin: 30px 20px 15px 20px;
    width: 506px;
    height: 182px;
    display: flex;

    border-radius: 10px;
    background: #ffffff;
    box-shadow: 20px 20px 60px #d9d9d9,
        -20px -20px 60px #ffffff;
}

/* 隐患中间盒子包括安全图标，和el-row */
.commonly {
    margin: 30px 20px 15px 20px;
    width: 506px;
    height: 182px;
    display: flex;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 20px 20px 60px #d9d9d9,
        -20px -20px 60px #ffffff;
}

.box_two {
    display: flex;
    justify-content: space-around;
    /* justify-content: space-between; */
}

.head_text {
    /* margin-top: 20px; */
    width: 80px;
    height: 30px;
    font-size: 18px;
    font-weight: 700;
    border-left: 5px solid #3e6ff5;
    padding-left: 20px;
}

.select {
    margin-right: 50px;
}

.inner {
    margin-top: 20px;
    padding-top: 15px;
    display: flex;
    justify-content: space-between;

}

.company {
    background-color: #fff;
    width: 100%;
    border-radius: 5px;
    box-shadow: 0 0 6px rgb(15 86 179 / 10%);
    margin-top: 20px;
}

.hidden {
    background-color: #fff;
    width: 100%;
    border-radius: 5px;
    box-shadow: 0 0 6px rgb(15 86 179 / 10%);
    margin-top: 20px;
}

.Hidden_text {
    text-align: center;
    color: rgb(136, 136, 136);
}

.item {
    margin-top: 10px;
    margin-right: 40px;
}
</style>